<template>
  <form class="addshipp" >
    <!-- @submit.prevent="submit" -->
    <input type="text" placeholder="收货人" v-model="name"/>
    <input type="text" placeholder="手机号码" v-model="phone" />
    <view class="tui-picker-content">
      <picker @change="changeRegin" mode="region" value="region">
        <view
          class="tui-picker-name"
          v-if="region[0] == undefined"
          style="color:rgb(121, 120, 120)"
        >所在地区</view>
        <view
          class="tui-picker-detail"
          v-if="region[0] !== undefined"
        >{{region[0]}} - {{region[1]}} - {{region[2]}}</view>
      </picker>
    </view>

    <textarea v-model="detailed" placeholder="详细地址:如道路,门牌号,小区,楼栋号"></textarea>
    <!-- <view class="tacitly">
      <text>设为默认地址</text>
      <switch :checked="address_id" @change="swit" bindchange="switch2Change" />
    </view> -->
    <view class="caution"  v-if="caut">请填写完整信息</view>
    <navigator :url="phone&&procince&&city&&area&&name&&detailed?'/pages/shipping/shipping': ''" redirect>
    <view class="btn" @click="increased">保存</view>
    </navigator>
  </form>
</template>

<script>
export default {
  data() {
    return {
      // 省市区三级联动初始化
      region: [],
      phone:"",
      procince:"",
      city:"",
      area:"",
      name:"",
      detailed:"",
      address_id: 0,
      caut:false,
      // urls:"",
    };
  },
  methods: {
    // switch2Change(e) {
    //   console.log("switch2 发生 change 事件，携带值为", e.detail.value);
    // },

    // 非空验证
    // submit () {
    //     console.log(123)
    //     if (!this.name) {
    //         showToast('请填写收货人姓名!')
    //         return false
    //     }

    //     if (!this.phone) {
    //         showToast('请填写手机号码!')
    //         return false
    //     }

    //     if (!this.region) {
    //         showToast('请选择所在地区!')
    //         return false
    //     }

    //     if (!this.detailed) {
    //         showToast('请填写详细地址!')
    //         return false
    //     }

    //     return true
    // },

    //switch开关
    // swit(e) {   
    // if(e.target.value === true){  
    //     this.address_id = '1';  
    //   }else{  
    //     this.address_id = '0';  
    //   }  
    // }, 
      

    // 选择省市区函数
    changeRegin(e){
      console.log(this.region)
      console.log(e.detail.value)
      this.region = e.detail.value;
      for(let i=0; i<this.region.length; i++){
        this.procince = this.region[0],
        this.city = this.region[1],
        this.area = this.region[2]
      }
    },


    // 保存按钮
  increased(options) {
    // 非空判断
    if(this.phone == '' || this.procince == '' || this.city == '' || this.area == '' || this.name == ''|| this.detailed == ''){
      setTimeout(()=>{this.caut = false}
      ,2000)
      this.caut = true 
    }

    // 是否跳转
      // if(this.caut == false){
      //   this.urls = '/pages/shipping/shipping'
      // }
      // console.log(this.urls)
      
    // 数据请求
    // uni.showModal("123")
    console.log(this.address_id)
    if (uni.getStorageSync("token")) {
      let data = {
        phone: this.phone,
        procince: this.procince,
        city: this.city,
        area: this.area,
        name: this.name,
        detailed: this.detailed,
        address_id: this.address_id,
      };
      data.token = uni.getStorageSync("token")
      wx.request({
        url: "http://api_dev.wanxikeji.cn/api/userAddressAddModify",
        // data: {},
        method: "POST", 
        data: data,
        // header: {},
        success: function () {
          // success
        },
        fail: function () {
          // fail
        },
        complete: function () {
          // complete
        },
      });
    }
  
  },
  },
};
</script>

<style lang="scss" scoped>
.addshipp {
  font-size: 25rpx;
}
.addshipp input {
  border-bottom: 1px rgb(218, 217, 217) solid;
  padding: 0 15px;
  height: 45px;
}
.addshipp textarea {
  height: 120px;
  padding: 15px;
  box-sizing: border-box;
  border-bottom: 1px rgb(218, 217, 217) solid;
  width: 100%;
}
.tacitly {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
}
.tacitly switch {
  zoom: 0.8;
}
.addshipp .btn {
  position: absolute;
  bottom: 2%;
  left: 35%;
  background: #f60;
  color: white;
  font-size: 13px;
  padding: 10px 50px;
  border-radius: 15px;
  cursor: pointer;
}
.addshipp .btn:active {
  background: rgb(214, 107, 35);
}

.tui-picker-content {
  padding: 15px;
  border-bottom: 1px rgb(218, 217, 217) solid;
}

.caution{
  position: absolute;
  border: 2px rgb(247, 112, 112) solid;
  background: rgba(247, 112, 112,.5);
  display: inline-block;
  padding: 10px 60px;
  border-radius: 5px;
  left:23%;
  top: 30%;
  z-index: 50; 
  // display: none; 
}
</style>